import React, { Component } from 'react';
import './index.css';
export default class List extends Component {
  render() {
    const { users, isFirst, isLoading, err } = this.props;
    return (
      <div className='row'>
        {isFirst ? (
          <h3 style={{ marginLeft: '20px', color: '#666' }}>
            请输入关键字，搜索用户
          </h3>
        ) : isLoading ? (
          <h3 style={{ marginLeft: '20px' }}>加载中...</h3>
        ) : err ? (
          <h3 style={{ marginLeft: '20px', color: 'red' }}>{err}</h3>
        ) : (
          users.map((userObj) => {
            return (
              <div key={userObj.id} className='card'>
                <a href={userObj.html_url} target='_blank'></a>
                <img
                  src={userObj.avatar_url}
                  style={{ width: '100px' }}
                  alt='head_portrait'
                />
                <p className='card-text'>{userObj.login}</p>
              </div>
            );
          })
        )}
      </div>
    );
  }
}
